<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>

<style>


table td {padding:3px;}
fieldset {margin:5px;}

input[type="submit"] {width:65px;}
input[type="button"] {width:65px;}
input[type="text"] {border:black solid 1px;}

select {border:black solid 1px;}
td.action {text-align:right;}
td>input[type="text"] {width:100%;}
td>select {width:95%;}

div.editor {display:none;}

thead td {font-weight:bold;}

span.flat {background-color:#FFF0B3;}

</style>
</head>
<body>
  
<script type='text/javascript' src='/RrdManager/dwr/interface/Graph.js'></script>
<script type='text/javascript' src='/RrdManager/dwr/interface/Manager.js'></script>
<script type='text/javascript' src='/RrdManager/dwr/engine.js'></script>
<script type='text/javascript' src='/RrdManager/dwr/util.js'></script>
<script type='text/javascript' src='/RrdManager/colorpicker.js'></script>
  
<jsp:useBean id="graphBuilder" scope="session" class="org.jivesoftware.management.plugin.meter.GraphBuilderBean"/>

<%

String datasourceSubmit = request.getParameter("datasourceAction");
String graphElementSubmit = request.getParameter("graphElementAction");
String legendSubmit = request.getParameter("graphLegendAction");
String storeSubmit = request.getParameter("storeAction");

if(datasourceSubmit != null) {
	String name = request.getParameter("item");
	String ds = request.getParameter("ds");
	String source = request.getParameter("dsname");
	String confun = request.getParameter("confunc");
	
	if("save".equalsIgnoreCase(datasourceSubmit)) {
		graphBuilder.addDatasource(name, ds, source, confun);	
	} 
} else if (graphElementSubmit != null) {
	String type = request.getParameter("type");
	String name = request.getParameter("name");
	String source = request.getParameter("color");
	String atitle = request.getParameter("title");
	if("save".equalsIgnoreCase(graphElementSubmit)) {
		graphBuilder.addGraph(type, name, source, atitle);
	} else if("remove".equalsIgnoreCase(graphElementSubmit)) {
//	    graphBuilder.remove(name);
	}
} else if (legendSubmit != null) {
	String source = request.getParameter("source");
	String concfun = request.getParameter("concfun");
	String gprint = request.getParameter("gprint");
	if("save".equalsIgnoreCase(legendSubmit)) {
	    graphBuilder.addLegend(source, concfun, gprint);
	}
} else if(storeSubmit != null) {
    String name = request.getParameter("name");
    if("store".equalsIgnoreCase(storeSubmit)) {
        graphBuilder.store(name);
    } else if("discard".equalsIgnoreCase(storeSubmit)) {
        graphBuilder.discard();
    }
    
}

%>

<script language="JavaScript">

/* Toggle the visibility of the input box */
function toggle(id) {
	var style = id.style.display;
	if(style == 'block' || style == '') {
		id.style.display='block';
	} else {
		id.style.display='none';
	}
	return false;
}


function loadOptions(dropdown, name) {

	function optionsWork(data) {
		DWRUtil.removeAllOptions(dropdown, data);
		DWRUtil.addOptions(dropdown, data);
	}
	Graph.getResources(optionsWork, name);
}

</script>

Existing Templates: <select><c:forEach var="templ" items="${graphBuilder.templates}">
<option><c:out value="${templ.name}"></c:out></option>
</c:forEach></select>

<fieldset>
<legend>Graph</legend>
<table width="100%">
<tr>
<td><form action="graphsetup.jsp" method="POST">
Name <input name="name" type="text">
<button type="submit" value="store" title="Save" name="storeAction">Store</button>
<button type="submit" value="discard" title="Discard" name="storeAction">Discard</button>
</form></td>
<td><img src="<%=request.getContextPath() %>/meter/graph"></td>
</tr>
</table>
</fieldset>

<%-- Datasource edit --%>
<fieldset>
<LEGEND>Datasources</LEGEND>

<c:if test="${empty graphBuilder.datasources}">
      <span class="flat" style="font-family:arial;cursor:pointer;" onClick="toggle(dsedit);">&nbsp;V&nbsp;</span> Start here
</c:if>

<table bgcolor="#E5F7FF" cellpadding="2" cellspacing="4">
<colgroup width="25"/>
<colgroup width="33%"/>
<colgroup width="33%">
<colgroup width="33%">

<c:forEach var="source" varStatus="status" items="${graphBuilder.datasources}">
<tr>
	<td valign="bottom"><c:if test="${status.last}">
      <span class="flat" style="font-family:arial;cursor:pointer;" onClick="toggle(dsedit);">&nbsp;+&nbsp;</span>
    </c:if></td>
	<td bgcolor="#B3E8FF" align="center">
		<em><c:out value="${source.item}"/></em><br/>
		<c:out value="${source.function}"/>
		<c:out value="${source.rraSource}"/>
		<br/>
		<SMALL><c:out value="${source.ds}"/></SMALL>
	</td>
	<td bgcolor="#B3E8FF" valign="bottom">
	
		<c:if test="${empty source.graphs}">
		      <span class="flat" style="font-family:arial;cursor:pointer;" onClick="toggle(<c:out value='graphedit${status.count}'/>);">&nbsp;+&nbsp;</span> Add graph element.
		</c:if>
	
		<table width="100%">
		<c:forEach var="element" varStatus="eStatus" items="${source.graphs}">
		<tr>
			<td valign="bottom"><c:if test="${eStatus.last}">
		      <span class="flat" style="font-family:arial;cursor:pointer;" onClick="toggle(<c:out value='graphedit${status.count}'/>);">&nbsp;+&nbsp;</span>
		    </c:if></td>
			<td><span  
				style="border: 1px solid #000000; background-color:<c:out value='${element.color}'/>; font-family:Verdana; font-size:10px;
				text-decoration: none;">&nbsp;&nbsp;&nbsp;</span></td>
			<td><c:out value="${element.type}"/></td>
			<td><c:out value="${element.title}"/></td>
		</tr>
		</c:forEach>
		</table>
		
		<form action="graphsetup.jsp" method="POST">
		<div class="editor" id="<c:out value='graphedit${status.count}'/>">
		<table>
		<tr>
			<c:out escapeXml="false" value=""/>
			<td><a href="javascript:pickColor('pick${status.count}');" id='pick${status.count}' 
				style="border: 1px solid #000000; font-family:Verdana; font-size:10px;
				text-decoration: none;">&nbsp;&nbsp;&nbsp;</a>
				<input id="<c:out value='pick${status.count}field'/>" size="7" type="hidden" name="color">
				</td>
			<td><select name="type">
				<option>LINE</option>
				<option>AREA</option>
				<option>STACK</option>
				<option>HRULE</option>
				<option>VRULE</option>
				</select>
				<input type="hidden" name="name" value='<c:out value="${source.item}"/>'>
			</td>
			<td><input type="text" name="title"></td>
			<td class="action"><button type="submit" name="graphElementAction" value="save">Save</button></td>
		</tr>
		</table>
		</div>
		</form>
		
	</td>
	<td bgcolor="#B3E8FF" valign="bottom" >
	
		<c:if test="${empty source.legends}">
		      <span class="flat" style="font-family:arial;cursor:pointer;" onClick="toggle(<c:out value='legendedit${status.count}'/>);">&nbsp;+&nbsp;</span> Add a legend.
		</c:if>
	
		<table width="100%">
		<colgroup width="50">
		<c:forEach var="legend" varStatus="lStatus" items="${source.legends}">
		<tr>
			<td valign="bottom"><c:if test="${lStatus.last}">
		      <span class="flat" style="font-family:arial;cursor:pointer;" onClick="toggle(<c:out value='legendedit${status.count}'/>);">&nbsp;+&nbsp;</span>
		    </c:if></td>
		
			<td><c:out value="${legend.function}"/></td>
			<td><c:out value="${legend.gprint}"/></td>
		</tr>
		</c:forEach>

		</table>
		
		<form action="graphsetup.jsp" method="POST">
		<div class="editor" id="<c:out value='legendedit${status.count}'/>">
		<table>
		<tr>
			<td><select name="concfun">
			<option>AVERAGE</option>
			<option>MAX</option>
			<option>MIN</option>
			<option>LAST</option>
			<option>TOTAL</option>
			</select><input type="hidden" name="source" value='<c:out value="${source.item}"/>'>
			</td>
			<td><input name="gprint" type="text"></td>
			<td class="action"><button type="submit" name="graphLegendAction" value="save">Save</button></td>
		</tr>
		</table>
		</div>
		</form>
	</td>

</tr>
</c:forEach>

</table>

<form action="graphsetup.jsp" method="POST">
<div class="editor" id="dsedit">
<table>
<tr>
	<td><input type="text" name="item"></td>
	<td><select name="ds" id="ds"  onchange="loadOptions(document.getElementById('dsname'), this.options[this.selectedIndex].text);">
		<option>---</option>
		<c:forEach var="mbean" items="${graphBuilder.chartableMBeans}">
			<option><c:out value="${mbean}" /></option>
		</c:forEach>
		</select></td>
	<td><select name="dsname" id="dsname"></select></td>
	<td><select name="confunc">
		<option>AVERAGE</option>
		<option>MAX</option>
		<option>MIN</option>
		<option>LAST</option>
		</select>
	</td>
	<td class="action"><button type="submit" name="datasourceAction" value="save">Save</button>
		<button style="visibility:hidden;" type="submit" name="datasourceAction" value="remove"></button>
	</td>
	</tr>
</table>
</div>
</form>


<%--
<table class="jivetable" width="100%">
<thead>
<tr>
<td>Graph Item</td>
<td>DataSource</td>
<td>Name</td>
<td>CF Type</td>
<td class="action"><input type="button" value="add" onClick="toggle(dsedit);"></td>
</tr>
</thead>
<tbody>
<c:forEach var="item" items="${graphBuilder.datasources}">
<tr>
	<td><c:out value="${item.item}"/></td>
	<td><c:out value="${item.ds}"/></td>
	<td><c:out value="${item.source}"/></td>
	<td><c:out value="${item.confunc}"/></td>
</tr>
</c:forEach>
</tbody>
</table>


</fieldset>

<fieldset>
<legend>Graph Elements</legend>
<table class="jivetable" width="100%">

<thead>
<tr>
	<td>Type</td>
	<td>Datasource</td>
	<td>Color</td>
	<td>Title</td>
	<td class="action"><input type="button" value="add"  onClick="toggle(graphedit)"></td>
</tr>
</thead>

<tbody>
<c:forEach var="element" items="${graphBuilder.graphElements}">
	
<tr>
	<td><c:out value="${element.type}"/></td>
	<td><c:out value="${element.name}"/></td>
	<td><c:out value="${element.color}"/></td>
	<td><c:out value="${element.title}"/></td>
	<td class="action"><input type="button" value="delete"></td>
</tr>
</c:forEach>

</tbody>
</table>

</fieldset>

<fieldset>
<legend>Legend</legend>
<table class="jivetable" width="100%">

<thead>
<tr>
	<td>Name</td>
	<td>Consol Function</td>
	<td>Description</td>
	<td class="action"><input type="button" value="add" onClick="toggle(legendedit)"></td>
</tr>
</thead>
<tbody>
<c:forEach var="legend" items="${graphBuilder.legends}">
<tr>
	<td><c:out value="${legend.source}"/></td>
	<td><c:out value="${legend.concfun}"/></td>
	<td><c:out value="${legend.gprint}"/></td>
	<td class="action"><input type="button" value="edit"></td>
</tr>
</c:forEach>
</tbody>
</table>

--%>
</fieldset>

</body>
</html>